<template>
  <div class="container">
    <el-card>
      <div class="search_header">
        <span>线上热门搜索</span>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="search_content">
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="search_contentItem_header">
              <span>搜索用户数</span>
              <svg
                t="1674092508434"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2687"
                width="16"
                height="16"
              >
                <path
                  d="M512 1024c-136.8 0-265.3-53.3-362-150C53.3 777.3 0 648.8 0 512s53.3-265.3 150-362C246.7 53.3 375.2 0 512 0s265.3 53.3 362 150c96.7 96.7 150 225.3 150 362 0 136.8-53.3 265.3-150 362-96.7 96.7-225.2 150-362 150z m0-979.5c-124.9 0-242.3 48.6-330.6 136.9C93.1 269.7 44.5 387.1 44.5 512s48.6 242.3 136.9 330.6c88.3 88.3 205.7 136.9 330.6 136.9 124.9 0 242.3-48.6 330.6-136.9 88.3-88.3 136.9-205.7 136.9-330.6 0-124.9-48.6-242.3-136.9-330.6C754.3 93.1 636.9 44.5 512 44.5z"
                  fill=""
                  p-id="2688"
                ></path>
                <path
                  d="M480.8 244.3c0 17.2 14 31.2 31.2 31.2s31.2-14 31.2-31.2-14-31.2-31.2-31.2-31.2 14-31.2 31.2zM512 810.9c-12.2 0-22.3-10-22.3-22.3V387.9c0-12.2 10-22.3 22.3-22.3 12.2 0 22.3 10 22.3 22.3v400.7c0 12.3-10.1 22.3-22.3 22.3z"
                  fill=""
                  p-id="2689"
                ></path>
              </svg>
            </div>
            <LineEcharts></LineEcharts>
          </el-col>
          <el-col :span="12">
            <div class="search_contentItem_header">
              <span>搜索用户数</span>
              <svg
                t="1674092508434"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2687"
                width="16"
                height="16"
              >
                <path
                  d="M512 1024c-136.8 0-265.3-53.3-362-150C53.3 777.3 0 648.8 0 512s53.3-265.3 150-362C246.7 53.3 375.2 0 512 0s265.3 53.3 362 150c96.7 96.7 150 225.3 150 362 0 136.8-53.3 265.3-150 362-96.7 96.7-225.2 150-362 150z m0-979.5c-124.9 0-242.3 48.6-330.6 136.9C93.1 269.7 44.5 387.1 44.5 512s48.6 242.3 136.9 330.6c88.3 88.3 205.7 136.9 330.6 136.9 124.9 0 242.3-48.6 330.6-136.9 88.3-88.3 136.9-205.7 136.9-330.6 0-124.9-48.6-242.3-136.9-330.6C754.3 93.1 636.9 44.5 512 44.5z"
                  fill=""
                  p-id="2688"
                ></path>
                <path
                  d="M480.8 244.3c0 17.2 14 31.2 31.2 31.2s31.2-14 31.2-31.2-14-31.2-31.2-31.2-31.2 14-31.2 31.2zM512 810.9c-12.2 0-22.3-10-22.3-22.3V387.9c0-12.2 10-22.3 22.3-22.3 12.2 0 22.3 10 22.3 22.3v400.7c0 12.3-10.1 22.3-22.3 22.3z"
                  fill=""
                  p-id="2689"
                ></path>
              </svg>
            </div>
            <LineEcharts></LineEcharts>
          </el-col>
        </el-row>
        <div class="search_table">
          <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
            stripe
            border
          >
            <el-table-column label="排名" sortable width="180" type="index">
            </el-table-column>
            <el-table-column prop="key" label="搜索关键字" sortable width="180">
            </el-table-column>
            <el-table-column prop="count" label="用户数" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="rand" label="周涨幅" :formatter="formatter">
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import LineEcharts from "./lineEcharts.vue";
export default {
  name: "Search",
  components: { LineEcharts },
  data() {
    return {
      tableData: [
        {
          key: "旅游",
          count: "121314",
          rand: "20.33%",
        },
        {
          key: "水库",
          count: "114141513",
          rand: "12.4%",
        },
      ],
    };
  },
  mounted() {
    // const myEcharts = echarts.init(this.$refs.charts);
    // myEcharts.setOption();
  },
};
</script>

<style>
.pagination {
    float: right;
}
.search_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.search_content {
  padding-top: 15px;
  height: 300px;
  width: 100%;
}
.search_contentItem_header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search_contentItem_header span {
  margin-right: 20px;
}
.charts {
  /* width: 100%; */
  height: 100px;
}
.search_table {
  margin-top: 10px;
}
</style>